<template>
    <div>
        <div v-if="!titleCurrentPanel" style="display:flex;justify-content: space-between">
            <div>
                <el-input v-model="queryData.customerLeadsName" placeholder="客户名称" size="small"></el-input>
                <el-date-picker
                        size="small"
                        v-model="queryData.createTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="创建日期"
                        end-placeholder="创建日期">
                </el-date-picker>
                <el-select v-model="queryData.customerLeadsSex" placeholder="客户性别" size="small">
                    <el-option v-for="item in dictionary.customerLeadsSex" :key="item.value" :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
                &nbsp;&nbsp;
                <el-button type="primary" size="small" @click="queryDataHandle(1, 10)">查询</el-button>
<!--                <el-divider direction="vertical"></el-divider>-->
                <el-button plain size="small" @click="resetQuery">重置</el-button>
            </div>
            <div>
                <el-button type="primary" size="small" @click="createClientHandle">创建</el-button>
<!--                <el-divider direction="vertical"></el-divider>-->
                <el-button type="primary" size="small" @click="importVisible = true">导入</el-button>
                <el-dialog
                        title="导入客户"
                        :visible.sync="importVisible"
                        width="30%">
                    <el-upload
                            class="upload-demo"
                            style="display: flex;justify-content: center"
                            drag
                            ref="uploadExcel"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :action="$uri + '/api/clientClue/importCustomerClue/1_0'"
                            :data="{status: '0',orgId: $store.getters.getUserInfo.orgId,orgNum: $store.getters.getUserInfo.orgNum,companyId: $store.getters.getUserInfo.companyId}">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    <div style="display: flex;justify-content: center;align-items: center;margin-top: 20px">
                        只能上传 xls/xlsx/csv 文件，且不超过10MB
                        <el-button size="small" type="text" @click="downloadTemp" style="padding: 0;font-size: 14px">
                            点击此处下载模板
                        </el-button>
                    </div>
                </el-dialog>
            </div>
        </div>

        <div v-if="titleCurrentPanel" style="display:flex;justify-content: space-between">
            <div>
                <div>已选中{{ multipleSelection.length }}</div>
            </div>
            <div>
                <el-button plain size="small" @click="tipHandler('1')">有效线索</el-button>
                <el-button plain size="small" @click="tipHandler('2')">无效线索</el-button>
                <el-button plain size="small" @click="tipHandler('3')">待回访</el-button>
                <el-button plain size="small" @click="allotVisible = true">分配客服</el-button>
                <!--                <el-button plain size="small" @click="allotVisible = true">分配坐席</el-button>-->
                <el-divider direction="vertical"></el-divider>
                <!--                <el-button plain size="small" @click="tagVisible = true">设置标签</el-button>-->
                <el-button plain type="danger" size="small" @click="deleteClient">彻底删除</el-button>
            </div>

            <el-dialog title="分配成员" :visible.sync="allotVisible" width="60%" :close-on-click-modal="false">
                <ListSelect @getData="getData" :listFields="listFields" :dataSource="memberData"/>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="allotVisible = false" size="small">返回</el-button>
                </span>
            </el-dialog>

            <el-dialog title="设置标签" :visible.sync="tagVisible" width="40%" :close-on-click-modal="false">
                <UpdateClientsTags :clientNum="multipleSelection.length"/>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="tagVisible = false">返回</el-button>
                </span>
            </el-dialog>

        </div>

        <div class="interspaceH"></div>

        <el-table @selection-change="tableRowChange" :data="dataSource"
                  :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="customerLeadsName" label="名称" :formatter="formatter"></el-table-column>
            <el-table-column prop="customerLeadsSex" label="客户性别" :formatter="formatter"></el-table-column>
            <el-table-column prop="customerLeadsPhone" label="电话" :formatter="formatter"></el-table-column>
            <el-table-column prop="customerLeadsDescription" label="描述" :formatter="formatter"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" :formatter="formatter"></el-table-column>
        </el-table>

        <div class="interspaceH"></div>

        <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                       @current-change="queryDataHandle($event,pagePagination.pageSize)"
                       :current-page="pagePagination.currentPage"
                       :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                       layout="total, sizes, prev, pager, next"
                       :total="pagePagination.total">
        </el-pagination>

        <Create_client ref="createClient" status="0" @queryDataHandle="queryDataHandle"/>

    </div>
</template>

<script>
//查询表单
import Create_client from "./create_client";
import ListSelect from "@/components/list_select/list_select"
import UpdateClientsTags from "@/views/customer/client/client_update_tags"

const initQueryData = {
    customerLeadsName: '',//客户名称
    customerLeadsSex: '',//客户性别
    createTime: ''//创建时间
}

const customerLeadsSex = [
    {
        value: '1',
        label: '男'
    },
    {
        value: '0',
        label: '女'
    }
]

export default {
    name: "client_untreated",
    components: {
        Create_client,
        ListSelect,
        UpdateClientsTags
    },
    data() {
        return {
            importVisible: false,
            tagVisible: false,
            allotVisible: false,
            titleCurrentPanel: false,
            multipleSelection: [],
            //查询表单
            queryData: {...initQueryData},
            //下拉列表种类
            dictionary: {
                customerLeadsSex: customerLeadsSex
            },
            //字段转换
            fieldType: {
                createTime: "datetime",
                customerLeadsSex: "array"
            },
            //列表数据
            dataSource: [],
            memberData: [],
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            listFields: {
                deptName: "所属部门",
                empName: "员工名称",
            },
        }
    },
    mounted() {
        //初始化执行查询方法
        this.queryDataHandle(1, 10)
        this.getMemberData()
    },
    methods: {
        queryDataHandle(page = 1, row = 10) {
            let that = this;
            let queryData = {...that.queryData}
            let _startCreateTime = queryData['createTime'][0];
            let _endCreateTime = queryData['createTime'][1];
            queryData['_startCreateTime'] = _startCreateTime
            queryData['_endCreateTime'] = _endCreateTime
            delete queryData['createTime']
            let payload = {
                ...queryData,
                customerLeadsStatus: '0',
                pageNum: page,
                pageSize: row
            }
            this.$request("/api/clientClue/getClueByParams/1_0", payload, "POST").then((data) => {
                that.dataSource = data.rows
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
            })
        },
        getMemberData() {
            let that = this
            that.$request("/api/emp/getAllEmp/1_0", {}, "POST").then((data) => {
                that.memberData = data.rows
            })
        },
        resetQuery() {
            this.queryData = {...initQueryData}
        },
        createClientHandle() {
            this.$refs.createClient.open(true)
        },
        importExcelHandle() {

        },
        tableRowChange(val) {
            if (val.length > 0) {
                this.titleCurrentPanel = true
            } else {
                this.titleCurrentPanel = false
            }
            this.multipleSelection = val;
        },
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
        },
        tipHandler(e) {
            let that = this
            let title = ''
            let message = ''

            if (e == '1') {
                title = '认定有效线索'
                message = '是否确认把所选线索认定为“有效线索”？确认后所选线索将会被转为“待分配客户”中。（当前已开启自动分配模式，将直接根据设定的规则分配客户）'
            } else if (e == '2') {
                title = '认定无效线索'
                message = '是否确认把所选线索认定为“无效线索”？确认后所选线索将会被转为“无效线索”状态列表中。'
            } else if (e == '3') {
                title = '设为待回访'
                message = '是否确认把所选线索设置为“待回访”？确认后所选线索将会被转为“待回访”状态列表中。'
            }

            that.$confirm(message, title, {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                let data = that.multipleSelection

                data.map((item) => {
                    item['customerLeadsStatus'] = e
                })

                let payload = {
                    clientList: data
                }

                this.$request("/api/clientClue/updateClientClue/1_0", payload, "POST").then((data) => {
                    this.queryDataHandle()
                    that.$message({
                        type: 'success',
                        message: '转移成功!'
                    });
                })
            });
        },
        getData(data) {
            let that = this

            let empId = data.empId

            let payload = {
                empId,
                clientSize: this.multipleSelection.length,
            }

            that.$request("/api/clientClue/pushAddClientAlert/1_0", payload, "POST").then((data) => {

            }).then(() => {
                let data = that.multipleSelection

                data.map((item) => {
                    item['customerLeadsStatus'] = "4"
                    item['empId'] = empId
                })

                let payload = {
                    clientList: data
                }
                that.$request("/api/clientClue/updateClientClue/1_0", payload, "POST").then((data) => {
                    that.queryDataHandle()
                    this.allotVisible = false
                    that.$message({
                        type: 'success',
                        message: '分配客服成功!'
                    });
                })
            })
        },
        setTagsHandler() {

        },
        uploadSuccess() {
            this.$message.success("导入成功");
            this.$refs.uploadExcel.clearFiles()
            this.importVisible = false
            this.queryDataHandle()
        },
        downloadTemp() {
            this.$requestFile("/api/excel/downloadTemp/1_0?fileType=clientClue", "", "导入客户线索模板.xls")
        },
        deleteClient() {
            let that = this
            that.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let clientList = this.multipleSelection
                let idList = []
                clientList.map((item) => {
                    idList.push(item.customerLeadsId)
                })

                that.$request("/api/clientClue/deleteClientClue/1_0", {idList}, "POST").then(() => {
                    that.$message.success("删除成功")
                    that.queryDataHandle()
                })
            })
        }
    }
}
</script>

<style scoped>
.box-card .el-input {
    width: 200px;
}

.el-card__body .el-select {
    width: 200px;
}
</style>
